<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<template v-if="isExistButton">
				<el-button size="small" type="primary" v-hasPermi="addedButton" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
				<el-divider direction="vertical"></el-divider>
			</template>
			<el-radio-group size="small" v-model="activeName">
				<el-radio-button label="1">枚举</el-radio-button>
				<el-radio-button label="2">常量</el-radio-button>
			</el-radio-group>
		</template>
		<el-form slot="query" size="small" inline v-if="isExistQuery">
			<el-form-item>
				<el-input v-model="queryData.content" clearable placeholder="字典名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="queryData.code" clearable placeholder="字典编码" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.isConfig" clearable placeholder="是否配置" style="width: 104px">
					<el-option label="是" value="1"></el-option>
					<el-option label="否" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" :data="tableData" v-bind="tableConfig">
			<el-table-column prop="content" label="字典名称" min-width="210" show-overflow-tooltip />
			<el-table-column label="字典编码" min-width="210">
				<template slot-scope="{ row }">
					<template v-if="row.type === '1' && isHasEnumAuth">
						<el-button type="text" @click="handleOpenDrawer(row)">{{ row.code }}</el-button>
					</template>
					<template v-else>{{ row.code }}</template>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="字典描述" min-width="260" show-overflow-tooltip />
			<el-table-column label="是否配置" width="80" align="center" :formatter="returnDictIsConfigTag" />
			<el-table-column prop="createTime" label="创建时间" min-width="170"></el-table-column>
			<el-table-column label="操作" fixed="right" :width="handleWidth" v-if="isHasAuthButton">
				<template slot-scope="{ row }">
					<el-button type="text" v-hasPermi="handleButtons.update" @click="handleOpenDialog(row.id)">修改</el-button>
					<el-button type="text" v-hasPermi="handleButtons.delete" @click="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
		<detail-drawer v-model="detailDrawer" :title="detailData.content" :auth-btns="enumButton" :data-id="detailData.id" />
		<form-dialog v-model="formDialog" :data-id="dataId" :type="queryData.type" @refresh="queryTableData()" />
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import detailDrawer from './detail';
import listMixins from '@/mixins/listMixins';
import { getDictDefineList, deleteDictDefine } from '@/api/system/tbSysDictDefinition';
export default {
	name: 'dictPage',
	mixins: [listMixins],
	components: { formDialog, detailDrawer },
	data() {
		return {
			activeName: '1',
			pageName: '字典',
			detailDrawer: false,
			detailData: {}
		};
	},
	computed: {
		listFunction() {
			return eval(getDictDefineList);
		},
		deleteFunction() {
			return eval(deleteDictDefine);
		},
		enumButton() {
			return lodash.filter(this.buttons, { enum: true });
		},
		isHasEnumAuth() {
			let enumQuery = lodash.find(this.enumButton, { field: 'enumQuery' });
			return lodash.some(this.authButton, { id: enumQuery?.id });
		},
		frameTopButton() {
			let frameTopBtns = [];
			if (!!this.addedButton) {
				frameTopBtns = [...frameTopBtns, this.addedButton];
			}
			return frameTopBtns;
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryData.type = val;
				this.queryData.page = 1;
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//返回字典是否配置标签
		returnDictIsConfigTag(row) {
			let attrs = { size: 'small' };
			if (row.isConfig === '1') {
				attrs['type'] = 'success';
				attrs['text'] = '是';
			} else if (row.isConfig === '2') {
				attrs['type'] = 'warning';
				attrs['text'] = '否';
			}
			return this.$createElement('elTag', { attrs }, attrs.text);
		},
		//打开抽屉
		handleOpenDrawer(row) {
			this.detailData = { ...row };
			this.detailDrawer = true;
		}
	}
};
</script>

<style scoped></style>
